import React from 'react';
import { Timeline, Radio } from 'antd';
import { useEffect, useState } from 'react';
import { useGetsystemversionQuery } from '../../store/request/systemversionrequest';


const VersionTimeLine = () => {
    const [mode, setMode] = useState('left');
    //存储历史版本记录
    const [versionrecordstate, setversionrecordstate] = useState([{}]);

    const onChange = (e) => {
        setMode(e.target.value);
    };

    const [tableParams, setTableParams] = useState({
        pagination: {
            current: 1,
            pageSize: 10,
        },
    });
    //这里为什么要包一层方法传递tableParams参数，是为了避免useEffect方法改变tableParams后会重新发送数据请求
    //这里包了一层后就只看tableParams里的pagesize和page会不会发生改变，tableParams状态的改变没有影响，
    const getRandomuserParams = (params) => ({
        pagesize: params.pagination?.pageSize,
        page: params.pagination?.current,
        //...params,
    });
    //tableParams发生变化就会执行发送请求和参数
    const result = useGetsystemversionQuery(getRandomuserParams(tableParams));

    //useEffect 钩子函数将在组件渲染后执行,如果isSuccess状态发生改变，还会再执行 
    useEffect(() => {

        //如果请求成功则调用setTableParams方法
        //在 useEffect 的回调函数中，我们检查 isSuccess 是否为 true，如果是，就执行setTableParams操作。
        //console.log("effect");
        if (result.isSuccess) {
            //console.log(result.currentData?.pagedata[0]);
            const historyrecord = result.currentData?.pagedata;
            const versionrecord = historyrecord.map(obj => {
                return {
                    label: obj.updatetime,
                    children: `${obj.version} - ${obj.commit} - ${obj.details}`
                };
            });
            setversionrecordstate(versionrecord);

        }


    }, [result.isSuccess]);


    return (
        <>
            <Radio.Group
                onChange={onChange}
                value={mode}
                style={{
                    marginBottom: 20,
                }}
            >
                <Radio value="left">左边</Radio>
                <Radio value="right">右边</Radio>
                <Radio value="alternate">相隔</Radio>
            </Radio.Group>
            <Timeline
                mode={mode}
                items={versionrecordstate}
            />

        </>
    )


}


export default VersionTimeLine



